<!--
* @description  
* @fileName  2_分析生命周期
* @author zhoujunlin
* @date 2022-04-01 20:17:29
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2_分析生命周期</title>
    <script src="../js/vue.js"></script>
</head>

<!-- 
常用的生命周期钩子：
1. mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
2. beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等收尾工作

关于销毁Vue实例
1. 销毁后借助Vue开发者工具看不到任何信息。
2. 销毁后自定义事件会失效 但原生DOM事件依然有效
3. 一般不会再beforeDestroy操作数据 因为即便操作数据 也不会再触发更新流程了。
    
 -->

<body>
    <div id="app" :x="n">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#app',
            // 使用template模板 容器内就不用放入内容了 不过template模板解析的时候会将外面的root容器给覆盖掉。
            // 而且template模板只能有一个根元素 所以必须用div将h2 buttong包裹起来 否则报错
            /* template:`
                <div>
                    <h2>当前的n值是：{{n}}</h2>
                    <button @click="add">点我n+1</button>
                </div>
            `, */
            data() {
                return {
                    n: 1
                }
            },
            methods: { // 方法
                add() {
                    console.log('add');
                    this.n++
                },
                bye(){
                    console.log('bye');
                    // 调用销毁函数 但之前的工作成果还在 只是vm不再管理了
                    this.$destroy()
                }
            },
            watch:{
                n(){
                    console.log('n变了');
                }
            },
            // 指数据代理和数据监测创建之前  不是vm创建
            beforeCreate() {
               console.log('beforeCreate');
               // debug 打开控制台可以看到data中无数据 无methods方法
               //console.log(this);
               //debugger 
            },
            created() { 
                console.log('created');
               // debug 打开控制台可以看到data中有数据 有add bye方法
               //console.log(this);
               //debugger
            },
            beforeMount() {
                console.log('beforeMount');
               // 元素都加载完成 未经编译 但还没挂载上去 HTML的body结构呈现的依旧是模板
               // 在这里操作DOM白操作 最终会被虚拟dom转换成的真实dom覆盖掉
               //console.log(this);
               //debugger
            },
            // Vue完成模板的解析并把初始的真实DOM元素放在页面后（挂载完毕）调用mounted
            // 只是初始化的时候调用一次，后续数据更改重新解析模板时不会再次调用
            mounted() {
                console.log('mounted');
               // 元素都加载完成 编译完成 成功挂载 HTML的body结构呈现的你想让他呈现的样子
               // 在这里操作DOM有效 但不推荐
               //console.log(this);
               //debugger
                
            },
            beforeUpdate() {
                console.log('beforeUpdate');
               // 更新数据时调用 数据为新的 但页面还是旧的 尚未更新
               //console.log(this.n);
               //debugger
            },
            updated() {
                console.log('updated');
               // 数据为新的 页面也是新的  数据与页面同步
               //console.log(this.n);
               //debugger
            },
            beforeDestroy() {
                console.log('beforeDestroy');
               // 销毁阶段触发
               // 点击销毁vm 能打印出n 调用了add方法 但页面不再更新
               //即到了这个阶段 能够访问数据 调用方法 但是所有对数据的修改不会触发更新
               // 此时vm中的data methods指令都处于可用状态 马上要执行销毁过程
               // 一般在此阶段 关闭定时器 取消订阅消息 解绑自定义事件等收尾工作
               //console.log(this.n);
               //this.add()
               //debugger
            },
            destroyed() {
                // 销毁阶段触发
                console.log('destroyed')
            }
        });
        // vm.$mount("#app")
    </script>
</body>

</html>